<template>
    <div style="height: 100%">
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">爆料</span>
        </x-header>
        <div class="main">
          <group>
            <cell>
              <span slot="title" class="basic">基本信息</span>
            </cell>
            <cell-box class="box">
              <div class="theme">
                <x-input placeholder="请填写主题" ></x-input>
              </div>
              <div class="content">
                <x-textarea placeholder="新鲜爆料，随意发挥"></x-textarea>
              </div>
            </cell-box>
          </group>
          <group>
            <cell>
              <span slot="title" class="basic">上传照片</span>
            </cell>
            <cell-box>
              <div class="photo">
                <div class="pic" @click="show">
                  <img src="../../../static/icon/upload/zhaoxiangji-2.png">
                </div>
                <span>内容新颖，图片具有创意最高可获得60积分</span>
              </div>
            </cell-box>
          </group>
        </div>
      </div>
      <div class="main-bottom">
        <x-button class="rel-button"><span>提交</span></x-button>
      </div>
      <actionsheet v-model="show1" :menus="menus2" @on-click-menu="click" show-cancel></actionsheet>
    </div>
</template>

<script>
  import { XTextarea,Actionsheet,PopupPicker,Picker} from 'vux'
    export default {
        name: "explosive",
      components:{
        XTextarea,
        Actionsheet,
        PopupPicker,
        Picker,
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        onChange (val) {
          console.log('val change', val)
        },
        onShow () {
          console.log('on show')
        },
        onHide (type) {
          console.log('on hide', type)
        },
        show(){
          this.show1=true
        }
      },
      data(){
          return{
            show1:false,
            menus2:{
              menu1:'拍照',
              menu2:'从相机中选择'
            }
          }
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .main{
    padding-top: 27.5px;
  }
  .basic{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: center;
    font-weight: bolder;
  }
  .box{
    display: flex;
    flex-direction: column;
  }
  .theme{
    width: 92%;
    height: 2.86rem;
    border: 1px solid #F5F5F5;
    border-radius: 2px;
  }
  .content{
    width: 92%;
    height: 10.71rem;
    margin-top: 1.07rem;
    border: 1px solid #F5F5F5;
    border-radius: 2px;
  }
  .photo{
    display: flex;
    flex-direction: column;
  }
  .pic{
    width: 5.36rem;
    height: 5.36rem;
    border: 1px dashed #CCCCCC;
    border-radius: 0.14rem;
  }
  .pic img{
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 1.42rem;
    margin-top: 1.43rem;
  }
  .photo span{
    font-size: 14px;
    color: #AD2532;
    letter-spacing: -0.34px;
    text-align: justify;
    font-weight: bold;
    margin-top: 1.07rem;
  }
  .main-bottom{
    width: 24.64rem;
    height: 3.21rem;
    margin-top: 3rem;
    position: absolute;
    left: 50%;
    margin-left: -12.32rem;
  }
  .rel-button{
    background: #AD2532;
    border-radius: 1.61rem;
  }
  .rel-button span{
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  }
</style>
